<!--<template>-->
<!--  <textarea :id="tinymceId" style="visibility: hidden;" />-->
<!--</template>-->

<!--<script>-->
<!--import {plugins, toolbar} from './config'-->
<!--import {ACCESS_TOKEN, ACCESS_TOKEN_NAME} from '../../api/request.js'-->
<!--import _ from 'lodash'-->
<!--import tinymce from 'tinymce'-->
<!--// A theme is also required-->
<!--import 'tinymce/themes/silver/theme'-->
<!--import 'tinymce/icons/default/icons'-->
<!--// // Any plugins you want to use has to be imported-->
<!--import 'tinymce/plugins/advlist'-->
<!--import 'tinymce/plugins/wordcount'-->
<!--import 'tinymce/plugins/autolink'-->
<!--import 'tinymce/plugins/autosave'-->
<!--import 'tinymce/plugins/charmap'-->
<!--import 'tinymce/plugins/codesample'-->
<!--import 'tinymce/plugins/contextmenu'-->
<!--import 'tinymce/plugins/emoticons'-->
<!--import 'tinymce/plugins/fullscreen'-->
<!--import 'tinymce/plugins/hr'-->
<!--import 'tinymce/plugins/imagetools'-->
<!--import 'tinymce/plugins/insertdatetime'-->
<!--import 'tinymce/plugins/link'-->
<!--import 'tinymce/plugins/media'-->
<!--import 'tinymce/plugins/noneditable'-->
<!--import 'tinymce/plugins/paste'-->
<!--import 'tinymce/plugins/print'-->
<!--import 'tinymce/plugins/searchreplace'-->
<!--import 'tinymce/plugins/tabfocus'-->
<!--import 'tinymce/plugins/template'-->
<!--import 'tinymce/plugins/textpattern'-->
<!--import 'tinymce/plugins/visualblocks'-->
<!--import 'tinymce/plugins/anchor'-->
<!--import 'tinymce/plugins/autoresize'-->
<!--import 'tinymce/plugins/bbcode'-->
<!--import 'tinymce/plugins/code'-->
<!--import 'tinymce/plugins/colorpicker'-->
<!--import 'tinymce/plugins/directionality'-->
<!--import 'tinymce/plugins/fullpage'-->
<!--import 'tinymce/plugins/help'-->
<!--import 'tinymce/plugins/image'-->
<!--import 'tinymce/plugins/importcss'-->
<!--import 'tinymce/plugins/legacyoutput'-->
<!--import 'tinymce/plugins/lists'-->
<!--import 'tinymce/plugins/nonbreaking'-->
<!--import 'tinymce/plugins/pagebreak'-->
<!--import 'tinymce/plugins/preview'-->
<!--import 'tinymce/plugins/save'-->
<!--import 'tinymce/plugins/spellchecker'-->
<!--import 'tinymce/plugins/table'-->
<!--import 'tinymce/plugins/textcolor'-->
<!--import 'tinymce/plugins/toc'-->
<!--import 'tinymce/plugins/visualchars'-->
<!--import 'tinymce/plugins/emoticons/js/emojis'-->
<!--import './zh_CN.js'-->

<!--let num = 1-->

<!--export default {-->
<!--  name: 'FormTinymce',-->
<!--  props: {-->
<!--    id: {-->
<!--      type: String,-->
<!--      default: () => {-->
<!--        num === 10000 && (num = 1)-->
<!--        return `tinymce${+new Date()}${num++}`-->
<!--      }-->
<!--    },-->
<!--    value: {-->
<!--      default: ''-->
<!--    },-->
<!--    toolbar: []-->
<!--  },-->
<!--  data() {-->
<!--    return {-->
<!--      tinymceId: this.id-->
<!--    }-->
<!--  },-->
<!--  mounted() {-->
<!--    const token = localStorage.getItem(ACCESS_TOKEN)-->
<!--    const tokenName = localStorage.getItem(ACCESS_TOKEN_NAME)-->
<!--    const uploadUrl = `${process.env.VUE_APP_API_ROOT}/user/file/upload`-->
<!--    // eslint-disable-next-line global-require-->
<!--    let conf = {-->
<!--      selector: `#${this.tinymceId}`,-->
<!--      language: 'zh_CN',-->
<!--      menubar: 'false',-->
<!--      skin: 'oxide',-->
<!--      skin_url: '/tinymce/skins/ui/tduck',-->
<!--      content_css: '/tinymce/skins/content/tduck',-->
<!--      cache_suffix: '?v=0.0.1',-->
<!--      plugins,-->
<!--      toolbar: this.toolbar ? this.toolbar : toolbar,-->
<!--      toolbar_drawer: 'sliding',-->
<!--      toolbar_mode: 'sliding',-->
<!--      height: 200,-->
<!--      // fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt",-->
<!--      branding: false,-->
<!--      object_resizing: false,-->
<!--      end_container_on_empty_block: true,-->
<!--      powerpaste_word_import: 'clean',-->
<!--      code_dialog_height: 450,-->
<!--      code_dialog_width: 1000,-->
<!--      advlist_bullet_styles: 'square',-->
<!--      advlist_number_styles: 'default',-->
<!--      default_link_target: '_blank',-->
<!--      link_title: false,-->
<!--      statusbar: false,-->
<!--      content_style: "img {max-width:100%;}",-->
<!--      nonbreaking_force_tab: true,-->
<!--      images_upload_handler(blobInfo, succFun, failFun) {-->
<!--        const file = blobInfo.blob()// 转化为易于理解的file对象-->
<!--        const xhr = new XMLHttpRequest()-->
<!--        xhr.withCredentials = false-->
<!--        xhr.open('POST', uploadUrl)-->
<!--        xhr.setRequestHeader(`${tokenName}`, `${token}`)-->
<!--        xhr.onload = function () {-->
<!--          if (xhr.status !== 200) {-->
<!--            failFun(`HTTP Error: ${xhr.status}`)-->
<!--            return-->
<!--          }-->
<!--          const json = JSON.parse(xhr.responseText)-->
<!--          if (!json || typeof json.data !== 'string') {-->
<!--            failFun(`Invalid JSON: ${xhr.responseText}`)-->
<!--            return-->
<!--          }-->
<!--          succFun(json.data)-->
<!--        }-->
<!--        const formData = new FormData()-->
<!--        formData.append('file', file, file.name)// 此处与源文档不一样-->
<!--        xhr.send(formData)-->
<!--      }-->
<!--    }-->
<!--    conf = Object.assign(conf, this.$attrs)-->
<!--    conf.init_instance_callback = editor => {-->
<!--      if (this.value) editor.setContent(this.value)-->
<!--      this.vModel(editor)-->
<!--    }-->
<!--    tinymce.init(conf)-->
<!--  },-->
<!--  destroyed() {-->
<!--    this.destroyTinymce()-->
<!--  },-->
<!--  methods: {-->
<!--    vModel(editor) {-->
<!--      // 控制连续写入时setContent的触发频率-->
<!--      this.$watch('value', (val, prevVal) => {-->
<!--        if (editor && val !== prevVal && val !== editor.getContent()) {-->
<!--          if (typeof val !== 'string') val = val.toString()-->
<!--          _.debounce(editor.setContent, 250, val)-->
<!--        }-->
<!--      })-->

<!--      editor.on('change keyup undo redo', () => {-->
<!--        this.$emit('input', editor.getContent())-->
<!--      })-->
<!--      editor.on('blur', () => {-->
<!--        this.$emit('blur')-->
<!--      })-->
<!--    },-->
<!--    destroyTinymce() {-->
<!--      if (!window.tinymce) return-->
<!--      const tinymceInstance = window.tinymce.get(this.tinymceId)-->
<!--      if (tinymceInstance) {-->
<!--        tinymceInstance.destroy()-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->
<!--<style>-->
<!--/* 在el-dialog中tinymce z-index 被太小而被遮挡时要加这两句 */-->
<!--.tox-tinymce-aux {-->
<!--  z-index: 99999 !important;-->
<!--}-->

<!--.tinymce.ui.FloatPanel {-->
<!--  z-Index: 99;-->
<!--}-->
<!--</style>-->
